<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 人口统计</header>
            <div class="chartBox clearfix">
                <article>
                    <div class="regionType-button clearfix" v-show="!chartNoDataShow">
                        <el-button-group>
                            <el-button type="primary" v-for="(item, key, index) in PopulationData" :key="index" v-if="item" size="mini" @click="regionTypeChange(key)">{{regionTranslation(key)}}</el-button>
                        </el-button-group>
                    </div>
                    <div class="chart-div" id="Population-chart" v-show="!chartNoDataShow"></div>
                    <p>人口密度（平均每平方英里的陆地面积居住的人数）：{{this.$accounting.formatMoney(density, "", 0)}}人</p>
                </article>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getPopulation}}</p>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                PopulationData: null,//人口统计数据
                statePopulationData: null,//州——人口统计数据
                cityPopulationData: null,//城市——人口统计数据
                zipPopulationData: null,//邮编——人口统计数据
                countyPopulationData: null,//郡县——人口统计数据
                neighbourhoodPopulationData: null,//附近——人口统计数据

                myEcharts: '',//人口统计数据——饼图
                regionType: 'state',//地区级别
                density: '',//人口密度

                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            getPopulation() {
                if(this.$store.getters.get_homejunctionData.population){
                    this.PopulationData = this.$store.getters.get_homejunctionData.population;
                    this.statePopulationData = this.$store.getters.get_homejunctionData.population.state;
                    this.cityPopulationData = this.$store.getters.get_homejunctionData.population.city;
                    this.zipPopulationData = this.$store.getters.get_homejunctionData.population.zip;
                    this.countyPopulationData = this.$store.getters.get_homejunctionData.population.county;
                    this.neighbourhoodPopulationData = this.$store.getters.get_homejunctionData.population.neighbourhood;

                    this.$nextTick(() => {
                        this.myEcharts = echarts.getInstanceByDom(document.getElementById('Population-chart'));
                        if (this.myEcharts === undefined) {
                            this.myEcharts = echarts.init(document.getElementById('Population-chart'));
                        }
                        this.myEcharts.showLoading();
                        window.addEventListener('resize', () => {
                            this.myEcharts.resize();
                        });

                        this.get_Population();
                    })
                }
                return this.$store.getters.get_homejunctionData.population
            }
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取人口统计数据
            get_Population() {
                this.$nextTick(() => {
                    if(this.PopulationData){
                        this.chartNoDataShow = false;
                        this.Population_charts(this.statePopulationData.current, this.statePopulationData.y1990, this.statePopulationData.y2000, this.statePopulationData.y2010);
                        this.density = this.statePopulationData.density;//人口密度
                    }else{
                        this.chartNoDataShow = true;
                        this.$refs.Population_chart_NoData.innerText = data.msg;
                    }
                })
            },
            //地区级别Change事件
            regionTypeChange(value){
                if (value == 'state') {
                    this.Population_charts(this.statePopulationData.current, this.statePopulationData.y1990, this.statePopulationData.y2000, this.statePopulationData.y2010);
                    this.density = this.statePopulationData.density;//人口密度
                }else if (value == 'city') {
                    this.Population_charts(this.cityPopulationData.current, this.cityPopulationData.y1990, this.cityPopulationData.y2000, this.cityPopulationData.y2010);
                    this.density = this.cityPopulationData.density;//人口密度
                }else if (value == 'zip') {
                    this.Population_charts(this.zipPopulationData.current, this.zipPopulationData.y1990, this.zipPopulationData.y2000, this.zipPopulationData.y2010);
                    this.density = this.zipPopulationData.density;//人口密度
                }else if (value == 'county') {
                    this.Population_charts(this.countyPopulationData.current, this.countyPopulationData.y1990, this.countyPopulationData.y2000, this.countyPopulationData.y2010);
                    this.density = this.countyPopulationData.density;//人口密度
                }else if (value == 'neighbourhood') {
                    this.Population_charts(this.neighbourhoodPopulationData.current, this.neighbourhoodPopulationData.y1990, this.neighbourhoodPopulationData.y2000, this.neighbourhoodPopulationData.y2010);
                    this.density = this.neighbourhoodPopulationData.density;//人口密度
                }
            },
            //人口统计——柱状图
            Population_charts(current, y1990, y2000, y2010) {
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    title: {
                        subtext: '根据最新的人口普查数据（单位：万人）',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // 控制图表摆放位置
                    grid: {
                        left: '15%',
                    },
                    xAxis: {
                        data: ["该地区目前的人口", "1990年该地区的人口", "2000年该地区的人口", "2010年该地区的人口"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696',
                            rotate: '25',
                            fontSize: 12
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '人口统计',
                        type: 'bar',
                        barWidth: '40',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return this.$accounting.formatMoney(param.value, "", 0) +'万人';
                            },
                            offset: [0, -5],
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: Math.round(current/10000),
                                itemStyle:{
                                    color: '#40c3f9',
                                }
                            },
                            {
                                value: Math.round(y1990/10000),
                                itemStyle:{
                                    color: '#ffbf53',
                                }
                            },
                            {
                                value: Math.round(y2000/10000),
                                itemStyle:{
                                    color: '#fe5960',
                                }
                            },
                            {
                                value: Math.round(y2010/10000),
                                itemStyle:{
                                    color: '#00bc7b',
                                }
                            },
                        ],
                    }],
                    animationEasing: 'elasticOut',
                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
